<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta property="og:title" content="Vite用在生产上" />
<meta property="og:description" content="安装 1 2 3 4 5 npm create vite@latest yarn create vite pnpm create vite Vue配置 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 import path from &#39;path&#39;; export default defineConfig({ // 编译后的baseurl base : &#39;/&#39;, server: { // 端口 port : 3000, host: &#39;0.0.0.0&#39;, // 为了能在局域网上用 // 解决烦人的跨域 proxy: { &#39;/api&#39;: { target: &#39;http://127." />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://wuju-i.gitee.io/post/202210103/" /><meta property="article:section" content="post" />
<meta property="article:published_time" content="2022-10-10T00:00:00+00:00" />
<meta property="article:modified_time" content="2022-10-10T00:00:00+00:00" />

  <meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="Vite用在生产上"/>
<meta name="twitter:description" content="安装 1 2 3 4 5 npm create vite@latest yarn create vite pnpm create vite Vue配置 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 import path from &#39;path&#39;; export default defineConfig({ // 编译后的baseurl base : &#39;/&#39;, server: { // 端口 port : 3000, host: &#39;0.0.0.0&#39;, // 为了能在局域网上用 // 解决烦人的跨域 proxy: { &#39;/api&#39;: { target: &#39;http://127."/>

  
  <meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff">
  <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#262d33">
  <title>
    
    橘子的博客 - Vite用在生产上
    
  </title>
  
  <link rel="shortcut icon" href="g.png" type="image/x-icon" />
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&display=swap"
    rel="stylesheet">
  
  
  
  <link rel="stylesheet" href="/minima.1714031344.css">

  
  
  <script defer type="text/javascript" src="/minima.1714031344.js"></script>
</head>
<script>
  
  let theme_2b_used = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';

  try {
    if (!('theme' in localStorage)) {
      const default_theme = '';
      
      
      if (default_theme === 'dark' || default_theme === 'light') {
        theme_2b_used = default_theme;
      }

      
      localStorage.theme = theme_2b_used;
    }
    
    document.querySelector('html').classList.add(localStorage.theme);
  } catch (e) {
    console.error(e);
  }
</script>


<body class=" sm:mx-5 sm:my-0">
  <header class="flex justify-between items-center mb-6 sm:my-3">
  <div class="flex items-center">
    
    <div id="theme-switcher" class="text-4xl cursor-pointer">🌑</div>
  </div>
  <nav class="flex items-center
    whitespace-nowrap overflow-x-auto overflow-y-hidden">
    
    <a class="ml-5" href="/">首页</a>
    
    <a class="ml-5" href="/categories">分类</a>
    
    <a class="ml-5" href="/log">日记</a>
    
    <a class="ml-5" href="/about">关于</a>
    
  </nav>
</header>
  
  

<h1 class="mt-6 mb-6">Vite用在生产上</h1>
<div class="mb-3 text-xs flex justify-between sm:flex-col">
	<div>
	
		Posted at &mdash; 22年 10月10日
	
		
	</div>
	
</div>
<main>
	<p></p>
	<article class="md">
		<h1 id="安装">安装</h1>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">npm create vite@latest
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">yarn create vite
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">pnpm create vite
</span></span></code></pre></td></tr></table>
</div>
</div><h1 id="vue配置">Vue配置</h1>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="kr">import</span> <span class="nx">path</span> <span class="nx">from</span> <span class="s1">&#39;path&#39;</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineConfig</span><span class="p">({</span>
</span></span><span class="line"><span class="cl"><span class="c1">// 编译后的baseurl
</span></span></span><span class="line"><span class="cl"><span class="c1"></span>  <span class="nx">base</span> <span class="o">:</span> <span class="s1">&#39;/&#39;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="nx">server</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="c1">// 端口
</span></span></span><span class="line"><span class="cl"><span class="c1"></span>    <span class="nx">port</span> <span class="o">:</span> <span class="mi">3000</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="nx">host</span><span class="o">:</span> <span class="s1">&#39;0.0.0.0&#39;</span><span class="p">,</span>    <span class="c1">// 为了能在局域网上用
</span></span></span><span class="line"><span class="cl"><span class="c1"></span>      <span class="c1">// 解决烦人的跨域
</span></span></span><span class="line"><span class="cl"><span class="c1"></span>    <span class="nx">proxy</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">      <span class="s1">&#39;/api&#39;</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">        <span class="nx">target</span><span class="o">:</span> <span class="s1">&#39;http://127.0.0.1:9090/api/&#39;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="nx">changeOrigin</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="nx">rewrite</span><span class="o">:</span> <span class="p">(</span><span class="nx">path</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">path</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/^\/api/</span><span class="p">,</span> <span class="s1">&#39;&#39;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">      <span class="p">}</span>
</span></span><span class="line"><span class="cl">    <span class="p">}</span>
</span></span><span class="line"><span class="cl">  <span class="p">},</span>
</span></span><span class="line"><span class="cl">  <span class="nx">resolve</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="nx">alias</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">      <span class="s1">&#39;@&#39;</span><span class="o">:</span> <span class="nx">path</span><span class="p">.</span><span class="nx">resolve</span><span class="p">(</span><span class="nx">__dirname</span><span class="p">,</span> <span class="s1">&#39;src&#39;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="p">}</span>
</span></span><span class="line"><span class="cl">  <span class="p">},</span>
</span></span><span class="line"><span class="cl">  <span class="nx">plugins</span><span class="o">:</span> <span class="p">[</span>
</span></span><span class="line"><span class="cl">    <span class="nx">vue</span><span class="p">(),</span>
</span></span><span class="line"><span class="cl">    <span class="c1">// 按需引入vant
</span></span></span><span class="line"><span class="cl"><span class="c1"></span>    <span class="nx">Components</span><span class="p">({</span>
</span></span><span class="line"><span class="cl">      <span class="nx">resolvers</span><span class="o">:</span> <span class="p">[</span><span class="nx">VantResolver</span><span class="p">()]</span>
</span></span><span class="line"><span class="cl">    <span class="p">}),</span>
</span></span><span class="line"><span class="cl">  <span class="p">]</span>
</span></span><span class="line"><span class="cl"><span class="p">})</span>
</span></span></code></pre></td></tr></table>
</div>
</div><h1 id="vue2">Vue2</h1>
<p>package.json</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl">  <span class="nt">&#34;name&#34;</span><span class="p">:</span> <span class="s2">&#34;wuju&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="nt">&#34;private&#34;</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="nt">&#34;version&#34;</span><span class="p">:</span> <span class="s2">&#34;0.0.0&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="nt">&#34;scripts&#34;</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="nt">&#34;dev&#34;</span><span class="p">:</span> <span class="s2">&#34;vite&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="nt">&#34;build&#34;</span><span class="p">:</span> <span class="s2">&#34;vite build&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="nt">&#34;preview&#34;</span><span class="p">:</span> <span class="s2">&#34;vite preview&#34;</span>
</span></span><span class="line"><span class="cl">  <span class="p">},</span>
</span></span><span class="line"><span class="cl">  <span class="nt">&#34;dependencies&#34;</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="nt">&#34;vue&#34;</span><span class="p">:</span> <span class="s2">&#34;^2.6.14&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="p">},</span>
</span></span><span class="line"><span class="cl">  <span class="nt">&#34;devDependencies&#34;</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="nt">&#34;vite&#34;</span><span class="p">:</span> <span class="s2">&#34;^2.9.9&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="nt">&#34;vite-plugin-vue2&#34;</span><span class="p">:</span> <span class="s2">&#34;^1.9.2&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="nt">&#34;vue-template-compiler&#34;</span><span class="p">:</span> <span class="s2">&#34;^2.6.14&#34;</span>
</span></span><span class="line"><span class="cl">  <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span></code></pre></td></tr></table>
</div>
</div><div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">createVuePlugin</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&#34;vite-plugin-vue2&#34;</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">defineConfig</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&#34;vite&#34;</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="kr">export</span> <span class="k">default</span> <span class="nx">defineConfig</span><span class="p">({</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">  <span class="nx">base</span><span class="o">:</span> <span class="s1">&#39;/dist&#39;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="nx">server</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">      <span class="nx">host</span><span class="o">:</span> <span class="s1">&#39;0.0.0.0&#39;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">      <span class="nx">port</span><span class="o">:</span> <span class="mi">3000</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">   <span class="p">},</span>
</span></span><span class="line"><span class="cl">  <span class="nx">plugins</span><span class="o">:</span> <span class="p">[</span><span class="nx">createVuePlugin</span><span class="p">()],</span>
</span></span><span class="line"><span class="cl">  <span class="nx">resolve</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="nx">alias</span><span class="o">:</span> <span class="p">[</span>
</span></span><span class="line"><span class="cl">      <span class="p">{</span>
</span></span><span class="line"><span class="cl">        <span class="nx">find</span><span class="o">:</span> <span class="s2">&#34;@&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="nx">replacement</span><span class="o">:</span> <span class="s2">&#34;/src&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">      <span class="p">},</span>
</span></span><span class="line"><span class="cl">    <span class="p">],</span>
</span></span><span class="line"><span class="cl">  <span class="p">},</span>
</span></span><span class="line"><span class="cl"><span class="p">});</span>
</span></span></code></pre></td></tr></table>
</div>
</div>
	</article>
</main>





	

	

	



  <footer class="mt-8 flex sm:flex-col-reverse justify-between items-center">
  <p class="mt-0 text-sm">
    © 2022 | 橘子
    
  </p>
  <p class="flex items-center mt-0">
    
  </p>
</footer>
</body>
</html>